angular 自定义指令取得控制器中数据的方法

发表于

这是一个问题

我们知道$scope作用域中可以定义值、变量、方法。而我们子定义模板中link方法的形参只能取得模板所在作用域的值、变量、方法。我们如何在模板中取得模板所在控制器作用域中的数据呢。

数据大不同

  • 数据可以分为固定的值、变量、方法。这三者的获取方法是不同的。

固定值的获取,代码提供

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html >
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>scope 取得控制器作用域中的值</title>
</head>
<body>
<div ng-controller="myCtrl">
    myCtrl:<input type="text" ng-model="name">
    my-dir:<my-dir name="{{name}}"></my-dir>
</div>
<script src="angular.js"></script>
<script>
    var myApp=angular.module('myApp',[]);
    myApp.controller('myCtrl',['$scope',function  ($scope) {
        $scope.name='珠峰培训';
    }])
    myApp.directive('myDir',function () {
        return {
            template:'<input type="text" ng-model="name1">',
            scope:{
                name1:'@name'
            }
        }
    })
</script>
</body>
</html>

  1. 定义name属性，取得上级控制器作用域中的name值

    1
    my-dir:<my-dir name="{{name}}"></my-dir>

  2. 模板scope对象中定义name1属性，其中@name等于上一级取得的name值。这样模板中name1属性就取得了上级控制器作用域中的name属性

    1
    2
    3
    scope:{
                  name1:'@name'
              }

  3. 将第二步保存的name1赋给模板DOM中

    1
    template:'<input type="text" ng-model="name1">',

##自定义模板取得控制器中变量的方法

  1. 将上面第一步中 name=”“ 改为name=”name”，使得取得的是变量
  2. 将上面第二步中 name1:’@name’ 改为 name:’=name’,取得第一步取得的值

##自定义模板取得控制器中方法的方法

  1. 将上面第一步中 name=”“ 改为name=”name”，使得取得的是变量
  2. 将上面第二步中 name1:’@name’ 改为 name:’=name’,取得第一步取得的值

注意事项

- name="{{name}}"中{{name}}保存的是name变量的值，是一个固定的值，无法做到双向绑定
- name="name" 中"name" 保存的是指向控制器中$scope.name，不是固定的，可以双向绑定